<script lang="ts" setup>
import LogoIcon from '@/icons/logo.svg?component';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const openUrl = (url: string) => {
  window.open(url, '__blank');
};
</script>

<template>
  <v-footer app class="bg-white pt-8" style="position: relative">
    <v-row no-gutters class="footer xs:flex-col">
      <v-col sm="12" md="12" lg="6" xl="6" class="xs:w-full pr-4">
        <logo-icon class="logo" />
        <div class="intro">{{ t('message.system.footer.intro') }}</div>
        <div class="copyright hidden-sm-and-down">
          © 2022 SharkDAO {{ t('message.system.footer.copyright') }}
        </div>
      </v-col>
      <v-col sm="12" md="12" lg="2" xl="2" class="xs:w-full">
        <div class="nav-group-title">
          {{ t('message.system.footer.product') }}
        </div>
        <v-tabs direction="vertical" hide-slider>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl('https://shark-dao.gitbook.io/sharkdao/about-us')
            "
          >
            {{ t('message.system.footer.about') }}
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl('https://sdaowin.gitbook.io/sharkdao/fundraising')
            "
          >
            {{ t('message.system.footer.raise') }}
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl(
                'https://sdaowin.gitbook.io/sharkdao/sharkdao/token-economics'
              )
            "
          >
            {{ t('message.system.footer.economy') }}
          </v-tab>
        </v-tabs>
      </v-col>
      <v-col sm="12" md="12" lg="2" xl="2" class="xs:w-full">
        <div class="nav-group-title">
          {{ t('message.system.footer.legal') }}
        </div>
        <v-tabs direction="vertical" hide-slider class="sm:pb-16 md:pb-16">
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl('https://sdaowin.gitbook.io/sharkdao/sharkdao/faq')
            "
          >
            {{ t('message.system.footer.faq') }}
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl(
                'https://sdaowin.gitbook.io/sharkdao/literature-and-content/terms'
              )
            "
          >
            {{ t('message.system.footer.term') }}
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="
              openUrl(
                'https://sdaowin.gitbook.io/sharkdao/literature-and-content/privacy'
              )
            "
          >
            {{ t('message.system.footer.privacy') }}
          </v-tab>
        </v-tabs>
      </v-col>
      <v-col sm="12" md="12" lg="2" xl="2" class="xs:w-full">
        <div class="nav-group-title">
          {{ t('message.system.footer.learn') }}
        </div>
        <v-tabs direction="vertical" hide-slider class="sm:pb-16 md:pb-16">
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="openUrl('https://docs.sdao.win/')"
          >
            Docs
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="openUrl('https://code.sdao.win/')"
          >
            Code
          </v-tab>
          <v-tab
            class="nav"
            color="#161615"
            @click.stop="openUrl('https://da.sdao.win/')"
          >
            Data
          </v-tab>
        </v-tabs>
      </v-col>
      <v-col sm="12" class="hidden-sm-and-up">
        <div class="copyright">
          © 2022 SharkDAO {{ t('message.system.footer.copyright') }}
        </div>
      </v-col>
    </v-row>
  </v-footer>
</template>

<style scoped lang="scss">
.footer {
  @apply px-[220px] md:px-[180px] sm:px-[140px] xs:px-[16px];
}
.logo {
  width: 304px;
  height: 34px;
  @apply mb-16;
}
.intro {
  // width: 546px;
  font-size: 20px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  color: #7a7893;
  line-height: 26px;
  @apply xs:w-full;
}
.copyright {
  margin-top: 70px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #7a7893;
  @apply mb-10 xs:pt-14 xs:pb-9 xs:my-0 md:absolute md:bottom-0 md:pb-9 sm:absolute sm:bottom-0 sm:pb-9;
}
.nav-group-title {
  margin-top: 18px;
  font-size: 18px;
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
  color: #7a7893;
  @apply h-[52px] leading-[52px] xs:mt-6;

  //&:last-of-type{
  //  @apply xs:mb-14;
  //}
}

.v-tab {
  padding-left: 0px !important;
}

.nav {
  font-size: 18px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  color: #161615 !important;
  text-transform: capitalize !important;
}
</style>
